<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>不同时间作品数</title>

    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
    // 创建 XMLHttpRequest 对象用于读取 CSV 文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '../output/mengBatch6.csv/part-00000-e1b4e736-34c6-42ab-abba-bc29d309fd88-c000.csv', true);
    xhr.onload = function () {
        if (this.status === 200) {
            const csvData = this.responseText;
            // 解析 CSV 数据，处理可能的空格，避免数据干扰
            const rows = csvData.split('\n').map(row => row.split(',').map(item => item.trim()));
            const headers = rows[0];
            // 过滤有效数据行（确保3列完整且支付转化率为有效数字）
            const dataRows = rows.slice(1).filter(row => row.length === 3 && !isNaN(parseFloat(row[2])));

            // 数据处理：按「性别+来源渠道」分组，提取转化率
            const sourceSet = new Set(); // 收集所有来源渠道
            const sexSet = new Set(); // 收集所有性别类型
            const rateMap = new Map(); // 存储 {来源渠道: {性别: 支付转化率}}

            dataRows.forEach(row => {
                const sex = row[0];
                const source = row[1];
                const paymentRate = parseFloat(row[2]).toFixed(4); // 保留4位小数，适配0.1%级别的精度
                // 注：若原始数据已为百分比（如0.05代表0.05%），直接用toFixed(4)；若原始数据是小数（如0.0005代表0.05%），需先×100再toFixed(4)

                // 收集唯一维度，用于图表轴和图例
                sourceSet.add(source);
                sexSet.add(sex);

                // 构建数据映射，便于后续提取
                if (!rateMap.has(source)) {
                    rateMap.set(source, new Map());
                }
                rateMap.get(source).set(sex, paymentRate);
            });

            // 转换为图表所需格式
            const sourceList = Array.from(sourceSet); // x轴：来源渠道列表
            const sexList = Array.from(sexSet); // 系列：性别列表
            // 构建系列数据：每个性别对应一组各渠道的支付转化率
            const seriesData = sexList.map(sex => {
                return {
                    name: sex,
                    type: 'bar',
                    data: sourceList.map(source => rateMap.get(source).get(sex) || 0)
                };
            });

            // 初始化 ECharts 实例
            const myChart = echarts.init(document.getElementById('lineChart'));

            // 指定图表的配置项和数据（重点：横纵坐标名称改为中文）
            const option = {
                title: {
                    text: '不同性别用户在各来源渠道的支付转化率',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        const source = sourceList[params[0].dataIndex];
                        let tipContent = `<b>来源渠道：${source}</b><br/>`;
                        // 遍历当前渠道下各性别的转化率，显示详细信息
                        params.forEach(item => {
                            tipContent += `${item.seriesName}支付转化率：${item.value}%<br/>`;
                        });
                        return tipContent;
                    }
                },
                legend: {
                    data: sexList, // 图例：按性别区分
                    top: 30,
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: sourceList,
                    name: '来源渠道', // 横坐标轴名称改为中文
                    nameTextStyle: { fontSize: 12, fontWeight: 'bold' }, // 优化名称样式，更醒目
                    axisLabel: {
                        rotate: 45, // 旋转标签，避免渠道名称过长重叠
                        interval: 0 // 显示所有来源渠道标签
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '支付转化率', // 纵坐标轴名称改为中文
                    nameTextStyle: { fontSize: 12, fontWeight: 'bold' }, // 优化名称样式，更醒目
                    axisLabel: {
                        formatter: '{value}%' // 显示百分比符号，直观体现转化率
                    },
                    min: 0, // 转化率从0开始，确保数据对比公平
                    max: 0.1, // 固定纵坐标最大值为0.1%
                    splitNumber: 5 // 分割5段，让刻度更清晰（0、0.02、0.04、0.06、0.08、0.1）
                },
                series: seriesData
            };

            // 使用配置项显示图表
            myChart.setOption(option);

            // 响应窗口大小变化，自动调整图表
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    };
    xhr.send();
</script>
</body>
</html>